.hide-enter-active,
.hide-leave-active {
  transition: width 0.5s ease;
}
.hide-enter-from,
.hide-leave-to {
  width: 0 !important;
}

.horizontal-fade-enter-active,
.horizontal-fade-leave-active {
  transition: all 0.5s ease;
}
.horizontal-fade-enter-from {
  opacity: 0;
  transform: translateX(-10px);
}
.horizontal-fade-leave-to {
  opacity: 0;
  transform: translateX(10px);
}

.vertical-fade-enter-active,
.vertical-fade-leave-active {
  transition: all 0.5s ease;
}
.vertical-fade-enter-from {
  opacity: 0;
  transform: translateY(10px);
}
.vertical-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
